<template>
	<view>
		<view class="title">{{$t(`查询信息填写`)}}</view>
		<!-- 第一步 -->
		<view class="First-step">
			<view class="step" v-for="(item,index) in BabySex" :key="index">
				<view class="img" :class="item.sex == sex? 'img-border' : ''" @click="ChareSex(index)">
					<image v-if="item.sex == sex" class="Select" src="/static/images/Select.png" mode=""></image>
					<image :src="item.sex == sex? item.sexImgActive : item.sexImg" mode=""></image>
				</view>
				<view class="sex" :style="{color:item.sex == sex? '#2A2A2A' : '#7E7E7E'}">{{item.sex}}</view>
			</view>
		</view>
		<picker mode="selector" :range="AgeGroup" range-key="name"  @change="bindDateChange">
			<view class="identity">
				<view class="id-title">{{$t(`年龄段`)}}</view>
				<view class="id-input">
					<input disabled="true" v-model="CurrentTime" type="text" placeholder-class="pl" :placeholder="$t(`请选择宝宝的年龄段`)" :disabled="true"/>
					<image src="/static/images/baby-view.png" mode=""></image>
				</view>
			</view>
		</picker>
		<picker mode="selector" :range="arrayLabel" range-key="name"  @change="labelChange">
			<view class="identity">
				<view class="id-title">{{$t(`曲线类型`)}}</view>
				<view class="id-input">
					<input type="text" disabled="true" v-model="LabelValue" placeholder-class="pl" :placeholder="$t(`请选择曲线类型`)"/>
				</view>
			</view>
		</picker>	
		<picker mode="selector" :range="Tables" range-key="name"  @change="TablesChange">
			<view class="identity">
				<view class="id-title">{{$t(`x、y轴类型`)}}</view>
				<view class="id-input">
					<input type="text" disabled="true" v-model="TablesValue" placeholder-class="pl" :placeholder="$t(`请选择x、y轴类型`)"/>
				</view>
			</view>
		</picker>	
		<view class="Submit" @click="queryChars()">{{$t(`查询官方生长曲线`)}}</view>
		<view class="charts-box" v-if="uCharsState">
		  <Uchars
		  type="tline"
		  :opts="opts"
		  :chartData="chartData"
		  :ontouch="true"
		   tooltipFormat="tooltipDemo1"
		  >
		  </Uchars>
		 </view>
		 <view class="proportion" v-if="uCharsState">
		 	{{info.field_name}}({{info.y_unit_name}}/{{info.x_unit_name}})
		 </view>
		 <view class="help" v-if="uCharsState" @click="helpChilk()">
		 	帮助指南
		 </view>
	</view>
</template>

<script>
	import Uchars from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	import { SingleCurce } from '@/api/baby.js';
	export default {
		components:{
			Uchars
		},
		data() {
			return {
				uCharsState:false,
				info:'',
				chartData: {
					series: []
				},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
				padding: [25,15,0,0],
				dataLabel: false,
				canvas2d:true,
				legend:{
					show:false,
				},
				xAxis: {
				  splitNumber:6,	
				  calibration:false,
				  gridType:'dash',
				  disableGrid: false,
				  itemCount: 5,
				  titlePop:''
				},
				extra: {
				  tooltip: {
					  legendShow:false
				  },
				  line: {
					type: "curve",
					width: 1,
					activeType: "solid"
				  }
				},
				yAxis: {
					showTitle:true,
				    gridType: "dash",
					dashLength: 2,
					splitNumber:10,
					data: [
					  {
						tofix:1,
						title:'',
						min: '',
						max: '',
					  }
					]
				 }
				},
				/* 曲线类型 */
				LabelValue:'',
				LabelType:'',
				arrayLabel:[{
					name:'百分位',
					type:0
				},{
					name:'标准差法',
					type:1
				}],
				
				//年龄段
				AgeType:'',
				AgeGroup:[{
					type:0,
					name:'0-3'
				},{
					type:1,
					name:'2-18'
				}],
				CurrentTime:'',
				
				//表类型
				TableType:'',
				Tables:[{
					type:0,
					name:'身高/年龄'
				},{
					type:1,
					name:'体重/年龄'
				},{
					type:2,
					name:'头围/年龄'
				},
				// {
				// 	type:3,
				// 	name:'体重/身高'
				// },
				{
					type:4,
					name:'BMI/年龄'
				}],
				TablesValue:'',
				
			    sex:'',
				BabySex:[{
					id:1,
					sex:'男孩',
					sexImg:require('@/static/images/Boy.png'),
					sexImgActive:require('@/static/images/Boy_Active.png'),
				},{
					id:2,
					sex:'女孩',
					sexImg:require('@/static/images/Girl.png'),
					sexImgActive:require('@/static/images/Girl_Active.png')
				}]
			}
		},
		methods: {
			/* 跳转帮助指南 */
			helpChilk:function(){
				uni.navigateTo({url:'/pages/extension/news_list/index?id=' + this.info.article_cate_id})
			},
			/* 查询官方生长曲线 */
			queryChars:function(){
				let that = this;
				if (!that.sex) return that.$util.Tips({
					title: that.$t(`请选择宝宝性别`)
				});
				if (that.AgeType === "") return that.$util.Tips({
					title: that.$t(`请选择宝宝年龄段`)
				});
				if (that.LabelType === "") return that.$util.Tips({
					title: that.$t(`请选择查询的表类型`)
				});
				if (that.TableType === "") return that.$util.Tips({
					title: that.$t(`请选择查询的x、y轴类型`)
				});
				SingleCurce({
					sex:that.sex == '男孩'? 0 : 1,
					data_type:that.AgeType,
					type:that.LabelType,
					statistics_type:that.TableType
				}).then(res => {
					
					that.info = res.data
					that.chartData.series = []
					that.opts.yAxis.data[0].min = parseFloat(res.data.min_y) 
					that.opts.yAxis.data[0].max = parseFloat(res.data.max_y) 
					that.opts.yAxis.data[0].title = res.data.y_unit_name
					that.opts.xAxis.titlePop =  res.data.x_unit_name
					
					let Color = ['#F09C42','#F3C246','#DF0029','#1B4F93','#511F90','#C57CAC','#00AE72','#00B2BF','#000000','#64004B']
					for (var i = 0; i < res.data.levels_name.length; i++) {
						
						if(res.data.samples_data[res.data.levels_name[i]] && res.data.levels_name[i] in res.data.samples_data){
							const processedData = [];  
							
							
							res.data.samples_data[res.data.levels_name[i]].forEach(item => {  
							    const [x, y] = [parseFloat(item.x, 10), parseFloat(item.y, 10)];  
							    processedData.push([x, y]);  
							});
							
							let obj = {
								pointShape:'none',
								name: res.data.levels_name[i],
								color:Color[i],
								data:processedData
							}
							
							that.chartData.series.push(obj)
						}
					}
					
					that.uCharsState = true
					
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},
			//选择年龄段
			bindDateChange: function(e) {
				this.CurrentTime = this.AgeGroup[e.detail.value].name
				this.AgeType = this.AgeGroup[e.detail.value].type
			},
			//选择表类型
			labelChange:function(e) {
				this.LabelValue = this.arrayLabel[e.detail.value].name
				this.LabelType = this.arrayLabel[e.detail.value].type
			},
			//选择x、y轴类型
			TablesChange:function(e) {
				this.TablesValue = this.Tables[e.detail.value].name
				this.TableType = this.Tables[e.detail.value].type
			},
			//选择宝宝性别
			ChareSex(index){
				 this.sex = this.BabySex[index].sex 
			}
		}
	}
</script>

<style lang="scss">
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
   padding: 0 0 32rpx 0;
   background: #FFFFFF;	
   width: 100%;
   height: 400px;
}
.help{
	text-align: center;
	color: #3A62F1;
	padding: 12rpx 0 88rpx 0;
	background: #FFFFFF;
}
.proportion{
	text-align: center;
	width: 100%;
	background: #FFFFFF;
}
.Submit{
	margin: 68rpx auto 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 410rpx;
	height: 108rpx;
	border-radius: 64rpx;
	background: #FF8FB9;
	color: #FFFFFF;
	font-size: 34rpx;
	font-weight: bold;
}	
.identity{
	margin: 48rpx;
	display: flex;
	flex-direction: column;
	.id-input{
		width: 100%;
		height: 108rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		input{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.pl{
			color: #B4B4B4;
		}
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.id-title{
		padding: 0 0 8rpx 12rpx;
		color: #7E7E7E;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
	}
}
.First-step{
	margin: 76rpx 182rpx 96rpx 182rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.step{
		display: flex;
		flex-direction: column;
		align-items: center;
		.sex{
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
		}
		.img-border{
			border: 2rpx solid #FF8FB9;
		}
		.img{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			width: 128rpx;
			height: 128rpx;
			margin: 0 0 16rpx 0;
			.Select{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				bottom: -10rpx;
				right: -10rpx;
			}
			image{
				width: 124rpx;
				height: 124rpx;
			}
		}
	}
}	
.title{
	margin: 42rpx 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 36rpx;
	color: #1A1A1A;
}	
page{
	background: #FFFFFF;
}
</style>
